<template>
  <div>
    <!-- 头部 -->
    <headers title="房屋管理"></headers>
    <!-- 没有数据时页面 -->
    <div v-if="!releasedList" class="empty-container">
      <van-image
        :src="require('../../assets/images/not-found.png')"
      ></van-image>
      <p class="rent-p">
        你还没有房源，<span class="rent-link" @click="$router.push('/rent/add')"
          >去发布房源</span
        >吧~~
      </p>
    </div>
    <!-- 有数据 -->
    <div v-else class="house-rent">
      <house-item
        v-for="obj in releasedList"
        :key="obj.houseCode"
        :obj="obj"
      ></house-item>
    </div>
  </div>
</template>

<script>
import Headers from '@/components/Headers.vue'
import HouseItem from '@/components/HouseItem.vue'
import { userGetHousesAPI } from '@/api'
export default {
  name: 'Rent',
  components: {
    Headers,
    HouseItem
  },
  data() {
    return {
      releasedList: null
    }
  },
  created() {
    this.userHouses()
  },
  methods: {
    // 获取出租列表
    async userHouses() {
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 100000
      })
      const { body } = await userGetHousesAPI()
      this.releasedList = body
      this.$toast.clear()
    }
  }
}
</script>

<style lang="less" scoped>
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  .van-image {
    width: 150px;
    height: 97.5px;
    margin: 30px 0;
  }
  .rent-p {
    font-size: 14px;
    color: #333;
    .rent-link {
      color: #33be85;
    }
  }
}
.house-rent{
  padding: 0 10px;
}
</style>
